<script setup>
import { ref } from 'vue';

// Mock数据（包含买卖方向标识）
const orderData = ref([
  { type: 'ask', price: 3.994, remaining: 458.6, original: 2270 },
  { type: 'ask', price: 3.993, remaining: 418.1, original: 1810 },
  { type: 'bid', price: 3.992, remaining: 401.5, original: 1390 },
  { type: 'bid', price: 3.991, remaining: 423.8, original: 990 },
  { type: 'bid', price: 3.99, remaining: 378.8, original: 566.2 },
  { type: 'ask', price: 3.989, remaining: 187.4, original: 187.4 },
]);

// 动态行样式
const rowStyle = ({ row }) => {
  const percentage = Math.min((row.remaining / row.original) * 100, 100);
  return {
    '--percentage': `${percentage}%`,
    '--color':
      row.type === 'bid' ? 'rgba(22, 163, 74, 0.2)' : 'rgba(220, 38, 38, 0.2)',
  };
};

// 行类名处理
const rowClassName = ({ row }) => {
  return row.type === 'bid' ? 'bid-row' : 'ask-row';
};
</script>

<template>
  <el-table
    :data="orderData"
    :row-class-name="rowClassName"
    :row-style="rowStyle"
    class="order-book-table"
  >
    <el-table-column prop="price" label="价格" width="120">
      <template #default="{ row }">
        <span class="cell-content">{{ row.price.toFixed(3) }}</span>
      </template>
    </el-table-column>

    <el-table-column prop="remaining" label="剩余量" width="120">
      <template #default="{ row }">
        <span class="cell-content">{{ row.remaining.toFixed(1) }}</span>
      </template>
    </el-table-column>

    <el-table-column prop="original" label="原始量" width="120">
      <template #default="{ row }">
        <span class="cell-content">{{ row.original.toFixed(1) }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped>
.order-book-table {
  --el-table-border-color: transparent;
  --el-table-header-bg-color: #f3f4f6;

  width: 400px;
}

:deep(.el-table__row) {
  position: relative;
  background: white !important;
}

:deep(.el-table__row)::after {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  width: var(--percentage);
  height: 100%;
  content: '';
  background: var(--color);
  transition: width 0.3s ease;
}

.cell-content {
  position: relative;
  z-index: 1;
}

:deep(.el-table__header th) {
  font-weight: 500;
  background: #f3f4f6;
}

:deep(.el-table td.el-table__cell) {
  border-bottom: none;
}

:deep(.el-table__inner-wrapper::before) {
  display: none;
}

:deep(.el-table tr:hover > td.el-table__cell) {
  background-color: transparent !important;
  border-bottom: none;
}
</style>
